import {
  Box,
  Column,
  Columns,
  Heading,
  IconSearch,
  IconHeart,
  TextField,
  Text,
  Stack,
  Inline,
} from 'braid-design-system';
import React, { useState, ReactElement } from 'react';

export default function HomePage() {
  const mockBlog = [
    {
      id: 1,
      title: 'title1',
      content: 'content1',
      read: 12,
      heart: 10,
    },
    {
      id: 2,
      title: 'title2',
      content: 'content2',
      read: 12,
      heart: 9,
    },
    {
      id: 3,
      title: 'title3',
      content: 'content3',
      read: 12,
      heart: 8,
    },
  ];
  const [isSearch, setSearch] = useState<boolean>(false);
  const [heartValue, setHeart] = useState<number>(0);
  const [searchValue, setSearchValue] = useState<string>('');
  function onClickSearch() {
    // todo: search something
    setSearch(!isSearch);
  }
  function onClickHeart() {
    setHeart(heartValue + 1);
  }
  function onChangeSearch(value: string) {
    setSearchValue(value);
  }

  const renderArtical = (): ReactElement => (
    <Stack space="small">
      {mockBlog.map((v) => (
        <Box background="card" padding="large" key={v.id}>
          <Stack space="medium">
            <Inline space="medium">
              <Text>{v.title}</Text>
              <Text align="right">阅读：{v.read}</Text>
              <Text align="right">点赞：{v.heart}</Text>
            </Inline>
            <Box>{v.content}</Box>
          </Stack>
        </Box>
      ))}
    </Stack>
  );
  // useEffect(()=>{

  // });
  return (
    <Box background="body" id="home">
      <Box padding="large" background="body">
        <Stack space="medium">
          <Box padding="large" background="card">
            <Columns space="none">
              <Column width="1/2">
                <Heading level="1" weight="weak">
                  Sky Web
                </Heading>
              </Column>
              <Column width="1/2">
                <Columns space="xxsmall">
                  <Column width="1/3">
                    {isSearch ? (
                      <TextField
                        onChange={(e) => {
                          onChangeSearch(e.currentTarget.value);
                        }}
                        value={searchValue}
                        id=""
                      />
                    ) : null}
                  </Column>
                  <Column width="content">
                    <Box onClick={onClickSearch}>
                      <Heading align="left" level="1" weight="weak">
                        <IconSearch />
                      </Heading>
                    </Box>
                  </Column>
                  <Column width="content">
                    <Box onClick={onClickHeart}>
                      <Heading align="left" level="1" weight="weak">
                        <IconHeart tone="critical" />
                      </Heading>
                    </Box>
                  </Column>
                  <Column width="content">
                    <Text align="center">{heartValue}</Text>
                  </Column>
                </Columns>
              </Column>
            </Columns>
          </Box>
          {renderArtical()}
          <Box padding="large">
            <Text align="center">
              Sky blog site @skyhuang 2021.01.01 粤xxxxx号
            </Text>
          </Box>
        </Stack>
      </Box>
    </Box>
  );
}
